<template>
  <div class="my-box">
    <span class="text">Jeremy leaning now</span>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
// prop接收样式
const props = defineProps({
  border: {
    type: String,
    default: '1px solid #ba6fe5',
  },
})

// 常量声明样式
const background = '#4c5e5f'

// 响应式数据声明样式
const color = ref('#f9f9f9')
const style = reactive({
  opacity: '0.8',
})
</script>

<style scoped>
.my-box {
  display: flex;
  padding: 12px;
  justify-content: center;
}
/* CSS变量注入v-bind(color) */
.text {
  /* // 使用常量声明的样式 */
  background: v-bind(background);

  /* // 使用响应式数据声明的样式 */
  color: v-bind(color);
  opacity: v-bind('style.opacity');

  /* // 使用prop接收的样式 */
  border: v-bind('props.border');
}
</style>
